<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <link rel="stylesheet" href="${root}css/video/video.css">
    <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.4.0/skins/default/aliplayer-min.css" />
     <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.4.0/aliplayer-min.js"></script>
</head>
<body>
<div class="video-wrapper">
    <div class="video-content">
        <div class="video-auto">
			<div  class="prism-player" id="J_prismPlayer" style=""></div>
        <script>
            var player = new Aliplayer({
            id: 'J_prismPlayer',
            width: '100%',
            height: '676px',
            autoplay: false,
            //source : '播放url',
            //播放方式二：点播用户推荐
            vid : '${video.VideoId!}',
        playauth : '${play.PlayAuth!}',
        cover: '${video.CoverURL!}'      
            //播放方式三：仅MTS用户使用
            //vid : '1e067a2831b641db90d570b6480fbc40',
            
            },function(player){
                console.log('播放器创建好了。')
           });
        </script>
        </div>
        <div class="video-list">
            <div class="tab-title">
                <a href="#" class="active">课程目录</a>
                <a href="#">课程PPT</a>
            </div>
            <div class="tab-list" >
                <ul class="list-1 show" >
                		<!--:for(c1 in chapters!){  -->
                		<!--:for(c in c1.list!){  -->
                    <li onclick="location.href='${root}course/play/${p.id}/video/${c.val}'" class="${c.val==p.video?'borderColor':''}">${c.title!}</li>
                    <!--:}  -->
                    <!--:}  -->
                    
                </ul>
                <ul class="list-2">
                		<!--:for(f in ppts!){  -->
                    <li><img class="imgLazyLoad" data-src="/upload/ppt/video/${p.video}/${f.name}" alt="${f.name}"> <span>${fLP.index}/${ppts.~size}</span></li>
                    <!--:}  -->
                </ul>
            </div>
        </div>
    </div>
    <div class="list-dialog">
        <img  alt="">
    </div>
</div>
<script src="${root}js/jquery.min.js"></script>
<script>
    function init() {
        $('.tab-title a').on('click',function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.tab-list ul').eq($(this).index()).show().siblings().hide();
        });
        /*$('.list-1 li').on('click',function () {
            $(this).addClass('borderColor').siblings().removeClass('borderColor');
        });*/
        $('.list-2 li img').on('click',function () {
            var url = $(this).context.src;
            $('.list-dialog').show().animate({width:"800px",height:"440px"});
            $('.list-dialog img').attr('src',url);
        });
        $('.list-dialog').on('mouseleave',function () {
            $('.list-dialog').hide().animate({width:"0",height:"0"});
        })
    }
    init();
    // 图片懒加载
    var lazyLoad = (function(){
        var clock;

        function init(){
            $('.tab-list').on("scroll", function(){
                if (clock) {
                    clearTimeout(clock);
                }
                clock = setTimeout(function(){
                    checkShow();
                }, 200);
            })
            checkShow();
        }

        function checkShow(){
            $(".list-2 img").each(function(){
                var $cur =$(this);
                if($cur.attr('isLoaded')){
                    return;
                }
                if(shouldShow($cur)){
                    showImg($cur);
                }
            })
        }
        function shouldShow($node){
            var scrollH = $(window).scrollTop(),
                winH = $(window).height(),
                top = $node.offset().top;
            if(top < winH + scrollH){
                return true;
            }else{
                return false;
            }
        }
        function showImg($node){
            $node.attr('src', $node.attr('data-src'));
            $node.attr('isLoaded', true);
        }
        return {
            init: init
        }
    })();
    lazyLoad.init();

</script>
</body>
</html>